<template>
    <div class="class-content">
        <h1 class="title">{{homeworkDetail.studentName}}</h1>
        <div class="listening" v-if="homeworkDetail.exerciseTypeId==='1'">
            <div class="container">
                <h2 class="homework-title">
                    {{homeworkDetail.level+' - '+homeworkDetail.lesson+' - '+homeworkDetail.exerciseType}}
                    <em class="allChecked" v-if="isAllChecked">All Checked</em>
                </h2>
                <div class="homework-info">
                    <h2 class="homework-info-title">Homework Info</h2>
                    <div class="info">Student Name:<em>{{''+homeworkDetail.studentName}}</em></div>
                    <div class="info">Check Time:
                        <em v-if="+homeworkDetail.checkStatus==2">{{homeworkDetail.checkTime}}</em>
                    </div>
                    <div class="info">Student ID:
                        <em>{{homeworkDetail.studentNo}}</em>
                    </div>
                    <div class="info">Checked By:
                        <em>{{homeworkDetail.checkedBy}}</em>
                    </div>
                    <div class="info">Class Name:
                        <em>{{homeworkDetail.className}}</em>
                    </div>
                </div>
                <div class="homework-list" v-for="(item,index) in homeworkDetail.content">
                    <h2 class="homework-list-title">Exercise Page
                        <em class="pageNum">{{item.pageNum}}</em>
                    </h2>
                    <div class="homework-list-item">
                        <em class="name">
                        Student Answer:
                        </em>
                        <em class="msg" v-html="item.myAnswer">{{item.myAnswer}}</em>
                    </div>
                    <div class="homework-list-item">
                        <em class="name">
                        Reference Answer:
                        </em>
                        <em class="msg" v-html="item.answer">{{item.answer}}</em>
                    </div>
                    <div class="homework-list-item" v-if="homeworkDetail.checkStatus=='2'">
                        <em class="name">
                        Star:
                        </em>
                        <em class="msg">
                            <span class="star active" v-if="StarNum[1][index]>0" v-for="p in StarNum[1][index]"></span>
                            <span class="star"  v-if="StarNum[0][index]>0" v-for="p in StarNum[0][index]"></span>
                        </em>
                    </div>
                    <em class="checked" v-if="item.homeworkRecordId=='0'">Unfinished</em>
                    <em class="checked" v-else-if="item.checkStatus=='2'">Checked</em>
                    <em class="checked" v-else>Uncheck</em>
                </div>
            </div>
        </div>
        <div class="speaking" v-if="homeworkDetail.exerciseTypeId==='2'">
            <div class="container">
                <h2 class="homework-title">
                    {{homeworkDetail.level+' - '+homeworkDetail.lesson+' - '+homeworkDetail.exerciseType}}
                    <em class="allChecked" v-if="isAllChecked">All Checked</em>
                </h2>
                <div class="homework-info">
                    <h2 class="homework-info-title">Homework Info</h2>
                    <div class="info">Student Name:<em>{{''+homeworkDetail.studentName}}</em></div>
                    <div class="info">Check Time:
                        <em v-if="+homeworkDetail.checkStatus==2">{{homeworkDetail.checkTime}}</em>
                    </div>
                    <div class="info">Student ID:
                        <em>{{homeworkDetail.studentNo}}</em>
                    </div>
                    <div class="info">Checked By:
                        <em>{{homeworkDetail.checkedBy}}</em>
                    </div>
                    <div class="info">Class Name:
                        <em>{{homeworkDetail.className}}</em>
                    </div>
                </div>
                <div class="homework-list" v-for="(item,index) in homeworkDetail.content">
                    <h2 class="homework-list-title">Exercise Page
                        <em class="pageNum">{{item.pageNum}}</em>
                    </h2>
                    <div class="homework-list-item">
                        <em class="name">
                            Student Answer:
                        </em>
                        <em class="msg" v-html="item.myAnswer"><audio></audio></em>
                    </div>
                    <div class="homework-list-item">
                        <em class="name">
                            Reference Answer:
                        </em>
                        <em class="msg" v-html="item.answer"><audio></audio></em>
                    </div>
                    <div class="homework-list-item" v-if="homeworkDetail.checkStatus=='2'">
                        <em class="name">
                            Star:
                        </em>
                        <em class="msg">
                            <span class="star active" v-if="StarNum[1][index]>0" v-for="p in StarNum[1][index]"></span>
                            <span class="star"  v-if="StarNum[0][index]>0" v-for="p in StarNum[0][index]"></span>
                        </em>
                    </div>
                    <em class="checked" v-if="item.homeworkRecordId=='0'">Unfinished</em>
                    <em class="checked" v-else-if="item.checkStatus=='2'">Checked</em>
                    <em class="checked" v-else>Uncheck</em>
                </div>
            </div>
        </div>
        <div class="reading" v-if="homeworkDetail.exerciseTypeId==='3'">
            <div class="container">
                <h2 class="homework-title">
                    {{homeworkDetail.level+' - '+homeworkDetail.lesson+' - '+homeworkDetail.exerciseType}}
                    <em class="allChecked" v-if="isAllChecked">All Checked</em>
                </h2>
                <div class="homework-info">
                    <h2 class="homework-info-title">Homework Info</h2>
                    <div class="info">Student Name:<em>{{''+homeworkDetail.studentName}}</em></div>
                    <div class="info">Check Time:
                        <em v-if="+homeworkDetail.checkStatus==2">{{homeworkDetail.checkTime}}</em>
                    </div>
                    <div class="info">Student ID:
                        <em>{{homeworkDetail.studentNo}}</em>
                    </div>
                    <div class="info">Checked By:
                        <em>{{homeworkDetail.checkedBy}}</em>
                    </div>
                    <div class="info">Class Name:
                        <em>{{homeworkDetail.className}}</em>
                    </div>
                </div>
                <div class="homework-list" v-for="(item,index) in homeworkDetail.content">
                    <h2 class="homework-list-title">Exercise Page
                        <em class="pageNum">{{item.pageNum}}</em>
                    </h2>
                    <div class="homework-list-item">
                        <em class="name">
                            Student Answer:
                        </em>
                        <em class="msg" v-html="item.myAnswer">{{item.myAnswer}}</em>
                    </div>
                    <div class="homework-list-item">
                        <em class="name">
                            Reference Answer:
                        </em>
                        <em class="msg" v-html="item.answer">{{item.answer}}</em>
                    </div>
                    <div class="homework-list-item" v-if="homeworkDetail.checkStatus=='2'">
                        <em class="name">
                            Star:
                        </em>
                        <em class="msg">
                            <span class="star active" v-if="StarNum[1][index]>0" v-for="p in StarNum[1][index]"></span>
                            <span class="star"  v-if="StarNum[0][index]>0" v-for="p in StarNum[0][index]"></span>
                        </em>
                    </div>
                    <em class="checked" v-if="item.homeworkRecordId=='0'">Unfinished</em>
                    <em class="checked" v-else-if="item.checkStatus=='2'">Checked</em>
                    <em class="checked" v-else>Uncheck</em>
                </div>
            </div>
        </div>
        <div class="writing" v-if="homeworkDetail.exerciseTypeId==='4'">
            <div class="container">
                <h2 class="homework-title">
                    {{homeworkDetail.level+' - '+homeworkDetail.lesson+' - '+homeworkDetail.exerciseType}}
                    <em class="allChecked" v-if="isAllChecked">All Checked</em>
                </h2>
                <div class="homework-info">
                    <h2 class="homework-info-title">Homework Info</h2>
                    <div class="info">Student Name:<em>{{''+homeworkDetail.studentName}}</em></div>
                    <div class="info">Check Time:
                        <em v-if="+homeworkDetail.checkStatus==2">{{homeworkDetail.checkTime}}</em>
                    </div>
                    <div class="info">Student ID:
                        <em>{{homeworkDetail.studentNo}}</em>
                    </div>
                    <div class="info">Checked By:
                        <em>{{homeworkDetail.checkedBy}}</em>
                    </div>
                    <div class="info">Class Name:
                        <em>{{homeworkDetail.className}}</em>
                    </div>
                </div>
                <div class="homework-list" v-for="(item,index) in homeworkDetail.content">
                    <h2 class="homework-list-title">Exercise Page
                        <em class="pageNum">{{item.pageNum}}</em>
                    </h2>
                    <div class="homework-list-item">
                        <em class="name">
                            Student Answer:
                        </em>
                        <em class="msg" v-html="item.myAnswer">{{item.myAnswer}}</em>
                    </div>
                    <div class="homework-list-item">
                        <em class="name">
                            Reference Answer:
                        </em>
                        <em class="msg" v-html="item.answer">{{item.answer}}</em>
                    </div>
                    <div class="homework-list-item"  v-if="homeworkDetail.checkStatus=='2'">
                        <em class="name">
                            Star:
                        </em>
                        <em class="msg">
                            <span class="star active" v-if="StarNum[1][index]>0" v-for="p in StarNum[1][index]"></span>
                            <span class="star"  v-if="StarNum[0][index]>0" v-for="p in StarNum[0][index]"></span>
                        </em>
                    </div>
                    <em class="checked" v-if="item.homeworkRecordId=='0'">Unfinished</em>
                    <em class="checked" v-else-if="item.checkStatus=='2'">Checked</em>
                    <em class="checked" v-else>Uncheck</em>
                </div>
            </div>
        </div>
        <div class="listening">
            <div class="container">
                <div class="comment">
                    Comment:
                    <em class="comment-content">{{homeworkDetail.comments}}</em>
                </div>
                <div class="btn-box">
                    <button class="btn" @click="submitHomeworkl(homeworkDetail)">Submit</button>
                    <nuxt-link :to="{name:'learner-homeworkDetail',query:{homeworkId:homeworkDetail.nextHomeworkId}}">
                    <button class="btn" v-if="homeworkDetail.nextHomeworkId!=0">Next Exercise</button>
                    </nuxt-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    import utils from '~/plugins/utils';
    import {mapState, mapActions} from 'vuex';
    import loadingImage from '~/components/loadingImage';
    export default {
        async fetch({query, store, redirect}){
            let homeworkId = +query.homeworkId;
            await store.dispatch('index/base/getHomeworkDetail', {homeworkId: homeworkId});
        },
        asyncData({query}){
            if (Object.keys(query).length) {
                return {
                    homeworkId: (query.homeworkId || "0") + "",
                };
            }
        },
        data () {
            return {
                totalStarArr  :[],
                earnedStarArr :[],
            }
        },
        methods: {
            ...mapActions('index/base', [
                'submitHomework'
            ]),
            submitHomeworkl(homeworkDetail){
                let homeworkId = homeworkDetail.homeworkId;
                if(homeworkDetail.isSubmit=='1' || homeworkDetail.finishStatus=='0' || homeworkDetail.classId=='0'){
                    this.$_error('Homework has been submitted successfully and can not be submitted again');
                }else{
                    this.submitHomework({homeworkId:homeworkId}).then(response=>{
                       let msg='';
                       switch (+response.status){
                           case 20070 :
                               msg = ""+response.data.message;
                               break;
                           case 20000 :
                               msg = ""+response.data.message;
                               break;
                           case 10012 :
                               msg = ""+response.data.message;
                               break;
                           case 500 :
                               msg = ""+response.data.message;
                               break;
                           case 200 :
                               msg = ""+response.data.message;
                               break;
                       }
                       this.$_message(msg);
                       console.log(msg);
                   });
               }
            },
        },
        created(){
            console.log(this.StarNum);
            console.log(this.homeworkDetail.content[0].myAnswer);
        },
        watch: {
            homeworkDetail() {
                if(+this.homeworkDetail.nextHomeworkId===0){
                    this.isHide = true;
                }
                else{
                    this.isHide = false;
                }
            }
        },
        computed: {
            ...mapState("index/base", {
                homeworkDetail: state => state.homeworkDetail,
            }),
            user() {
                return this.$store.state.authUser;
            },
            StarNum() {
                let StarNumArr = [];
                let that = this;
                this.homeworkDetail.content.forEach((item, index) => {                    
                    let starNum = +item.totalStar;
                    let earnedStar = +item.earnedStar;
                    if(earnedStar==0){
                        that.totalStarArr[index]=starNum;
                        that.earnedStarArr[index]=0;
                    }else{
                        let newStarNum = starNum-earnedStar;
                        that.totalStarArr[index] = newStarNum;
                        that.earnedStarArr[index] = earnedStar;
                    }
                
                });
                StarNumArr.push(that.totalStarArr,that.earnedStarArr);
                return StarNumArr;
            },
            isAllChecked() {
                for(var p of this.homeworkDetail.content){
                    if(p.checkStatus==0){
                        return false;
                    }
                }
                return true;
            }
        },
        components: {
            loadingImage
        }
    }
</script>

<style lang="less" scoped>
    @import "~~assets/less/element/nav_select";
    @import "~~assets/less/element/content_table";
    @import "~~assets/less/element/tab_pagination";
    @import "~~assets/less/element/dialog";
    @import "~~assets/less/educator/myClass";
    @import "~~assets/less/element/common";
    @import "~~assets/less/learner/myCourse";
    .title {
        font-size: 28px;
        text-align: center;
    }
    .star {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url('~~assets/img/star.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 20px;
    }
    .active {
        background: url('~~assets/img/star-active.png') no-repeat;
    }
    .listening {
        .container {
            padding:0 30px;
            margin:0 auto;
        }
        .homework-title {
            font-weight: 700;
            padding:20px 0 10px 0;
            position: relative;
            .allChecked {
                position: absolute;
                right: 0;
                color: #ff7b39;
                font-size: 25px;
            }
        }
        .homework-info {
            border:1px solid #EBEBEB;
            .homework-info-title {
                color: #333333;
                font-size: 19px;
                font-weight: 800;
                padding: 10px 60px;
                background: url('~~assets/img/user.png') no-repeat;
                background-position: 39px 14px;
            }
            .info {
                display: inline-block;
                width: 30%;
                text-align: left;
                padding:10px 50px 10px 100px;
                font-weight: 600;
                em {
                    padding-left: 20px;
                    color: #FF7B39;
                }
            }
        }
        .homework-list {
            border:1px solid #EBEBEB;
            margin-top: 20px;
            position: relative;
            .homework-list-title {
                color: #5A6481;
                font-size: 19px;
                padding: 10px 120px;
                .pageNum{
                    color: #ff9900;
                }
            }
            .homework-list-item {
                padding:10px 30px 10px 0;
                .name{
                    display: inline-block;
                    width: 330px;
                    text-align: right;
                }
                .msg {
                    padding-left: 30px;
                    color: #333;
                }
            }
            .checked {
                position: absolute;
                right: 20px;
                bottom: 20px;
                font-size: 25px;
                color: #699BD1;
            }
        }
        .comment {
            font-size: 17px;
            padding: 30px 120px;
            .comment-content {
                font-size: 15px;
                color: #333;
                padding-left: 15px;
            }
        }
        .btn-box {
            text-align: center;
            margin-bottom: 40px;
            .btn {
                width: 150px;
                line-height: 34px;
                background: #214c6f;
                font-size: 15px;
                color: #fff;
                margin-left: 40px;
            }
        }
    }
    .speaking {
        .container {
            padding:0 30px;
            margin:0 auto;
        }
        .homework-title {
            font-weight: 700;
            padding:20px 0 10px 0;
            position: relative;
            .allChecked {
                position: absolute;
                right: 0;
                color: #ff7b39;
                font-size: 25px;
            }
        }
        .homework-info {
            border:1px solid #EBEBEB;
            .homework-info-title {
                color: #333333;
                font-size: 19px;
                font-weight: 800;
                padding: 10px 60px;
                background: url('~~assets/img/user.png') no-repeat;
                background-position: 39px 14px;
            }
            .info {
                display: inline-block;
                width: 20%;
                text-align: left;
                padding:10px 50px 10px 130px;
                font-weight: 600;
                em {
                    padding-left: 20px;
                    color: #FF7B39;
                }
            }
        }
        .homework-list {
            border:1px solid #EBEBEB;
            margin-top: 20px;
            position: relative;
            .homework-list-title{
                color: #5A6481;
                font-size: 19px;
                padding: 10px 120px;
                .pageNum {
                    color: #ff9900;
                }
            }
            .homework-list-item {
                padding:10px 30px 10px 0;
                .name {
                    display: inline-block;
                    width: 330px;
                    text-align: right;
                }
                .msg {
                    padding-left: 30px;
                }
            }
            .homework-list-item:not(:last-child) {
                position: relative;
                display: inline-block;
                line-height: 60px;
                .msg {
                    display: inline-block;
                    width: 80px;
                    height: 80px;
                    background: url("~~assets/img/main_content/exercise/audio_play.png") no-repeat;
                    background-size: 80% 100%;
                    position: absolute;
                    top: -3px;
                    right:-82px;
                    cursor: pointer;
                }
            }
            .checked {
                position: absolute;
                right: 20px;
                bottom: 20px;
                font-size: 25px;
                color: #699BD1;
            }
        }
        .comment {
            font-size: 17px;
            padding: 30px 120px;
            .comment-content {
                font-size: 15px;
                color: #333;
                padding-left: 15px;
            }
        }
        .btn-box {
            text-align: center;
            margin-bottom: 40px;
            .btn {
                width: 150px;
                line-height: 34px;
                background: #214c6f;
                font-size: 15px;
                color: #fff;
                margin-left: 40px;
            }
        }
    }
    .reading {
        .container {
            padding:0 30px;
            margin:0 auto;
        }
        .homework-title {
            font-weight: 700;
            padding:20px 0 10px 0;
            position: relative;
            .allChecked {
                position: absolute;
                right: 0;
                color: #ff7b39;
                font-size: 25px;
            }
        }
        .homework-info {
            border:1px solid #EBEBEB;
            .homework-info-title {
                color: #333333;
                font-size: 19px;
                font-weight: 800;
                padding: 10px 60px;
                background: url('~~assets/img/user.png') no-repeat;
                background-position: 39px 14px;
            }
            .info {
                display: inline-block;
                width: 30%;
                text-align: left;
                padding:10px 50px 10px 100px;
                font-weight: 600;
                em {
                    padding-left: 20px;
                    color: #FF7B39;
                }
            }
        }
        .homework-list {
            border:1px solid #EBEBEB;
            margin-top: 20px;
            position: relative;
            .homework-list-title {
                color: #5A6481;
                font-size: 19px;
                padding: 10px 120px;
                .pageNum{
                    color: #ff9900;
                }
            }
            .homework-list-item {
                padding:10px 30px 10px 0;
                .name{
                    display: inline-block;
                    width: 330px;
                    text-align: right;
                }
                .msg {
                    padding-left: 30px;
                    color: #333;
                }
            }
            .checked {
                position: absolute;
                right: 20px;
                bottom: 20px;
                font-size: 25px;
                color: #699BD1;
            }
        }
        .comment {
            font-size: 17px;
            padding: 30px 120px;
            .comment-content {
                font-size: 15px;
                color: #333;
                padding-left: 15px;
            }
        }
        .btn-box {
            text-align: center;
            margin-bottom: 40px;
            .btn {
                width: 150px;
                line-height: 34px;
                background: #214c6f;
                font-size: 15px;
                color: #fff;
                margin-left: 40px;
            }
        }
    }
    .writing {
        .container {
            padding:0 30px;
            margin:0 auto;
        }
        .homework-title {
            font-weight: 700;
            padding:20px 0 10px 0;
            position: relative;
            .allChecked {
                position: absolute;
                right: 0;
                color: #ff7b39;
                font-size: 25px;
            }
        }
        .homework-info {
            border:1px solid #EBEBEB;
            .homework-info-title {
                color: #333333;
                font-size: 19px;
                font-weight: 800;
                padding: 10px 60px;
                background: url('~~assets/img/user.png') no-repeat;
                background-position: 39px 14px;
            }
            .info {
                display: inline-block;
                width: 30%;
                text-align: left;
                padding:10px 50px 10px 100px;
                font-weight: 600;
                em {
                    padding-left: 20px;
                    color: #FF7B39;
                }
            }
        }
        .homework-list {
            border:1px solid #EBEBEB;
            margin-top: 20px;
            position: relative;
            .homework-list-title {
                color: #5A6481;
                font-size: 19px;
                padding: 10px 120px;
                .pageNum{
                    color: #ff9900;
                }
            }
            .homework-list-item {
                padding:10px 30px 10px 0;
                .name{
                    display: inline-block;
                    width: 330px;
                    text-align: right;
                }
                .msg {
                    padding-left: 30px;
                    color: #333;
                }
            }
            .checked {
                position: absolute;
                right: 20px;
                bottom: 20px;
                font-size: 25px;
                color: #699BD1;
            }
        }
        .comment {
            font-size: 17px;
            padding: 30px 120px;
            .comment-content {
                font-size: 15px;
                color: #333;
                padding-left: 15px;
            }
        }
        .btn-box {
            text-align: center;
            margin-bottom: 40px;
            .btn {
                width: 150px;
                line-height: 34px;
                background: #214c6f;
                font-size: 15px;
                color: #fff;
                margin-left: 40px;
            }
        }
    }
</style>
